<template>
  <div class="travel-scenic">
    <div class="goods-box">
      <ul>
        <li v-for="item in list" :key="item.scenic_id" @click="goDetail(item.scenic_id)">
          <div class="goods-img">
            <img :src="require(`@/assets/images/${item.view_pic}`)" alt="">
          </div>
          <div class="goods-cont">
            <h3>{{ item.name }}</h3>

            <p> <i class="iconfont icon-weizhi location"></i> 地址：<span>{{item.place}}</span></p>
            <p> <i class="iconfont icon-dianhua-yuankuang phone"></i> 电话：<span>{{item.phone}}</span></p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getSceData()
    console.log(this.list)
  },
  methods: {
    getSceData() {
      //此时相当于访问 http://localhost:8080/data/scenic.json
      this.$axios
        .get('/data/scenic.json')
        .then((response) => {
          let { status, data } = response
          if (+status !== 200) return
          this.list = data
        })
        .catch((error) => {
          console.log(error)
        })
    },
    goDetail(id) {
      this.$router.push(`/scenicsDetail?id=${id}`)
    }
  }
}
</script>

<style scoped>
.goods-box {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 20px;
}
.goods-box > ul {
  display: flex;
  flex-wrap: wrap;
  margin-left: -30px;
}
.goods-box > ul li {
  width: 30.8%;
  height: 480px;
  background-color: #fff;
  padding: 10px;
  margin-bottom: 30px;
  margin-left: 30px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 1px 2px 3px #dbdbdb;
}
.goods-box > ul li:hover .goods-img img {
  transition: all 5s;
  transform: translateX(-10%) scale(1.1);
}
.goods-box > ul li .goods-img {
  width: 99%;
  height: 73%;
  overflow: hidden;
}
.goods-box > ul li .goods-img img {
  width: auto;
  min-width: 100%;
  height: 110%;
  transition: all 2s;
}
.goods-box > ul li .goods-cont {
  padding: 0 3px;
}
.goods-box > ul li .goods-cont h3 {
  padding: 8px 0;
  margin-bottom: 10px;
  font-size: 16px;
  border-bottom: 1px solid #e6e6e6;
}
.goods-box > ul li .goods-cont p {
  line-height: 25px;
  font-size: 15px;
  color: #666;
}
.goods-box > ul li .goods-cont .phone {
  color: #c53434;
}
.goods-box > ul li .goods-cont .location {
  color: #4a9fa1;
}

/* 移动端样式 */
@media screen and (max-width: 767px) {
  .goods-box {
    margin-top: 0;
    padding-top: 10px;
  }

  .goods-box > ul {
    justify-content: center;
  }
  .goods-box > ul li {
    width: 75%;
    height: 90vw;
  }

  .goods-box > ul li .goods-cont h3 {
    font-size: 12rem;
  }
  .goods-box > ul li .goods-cont p {
    font-size: 10rem;
    line-height: 5vw;
  }
}

/* 平板端样式 */
@media screen and (min-width: 768px) and (max-width: 1155px) {
  /* 在此处编写平板端样式 */
  .goods-box > ul {
    justify-content: space-around;
  }
  .goods-box > ul li {
    width: 43%;
    height: 50vw;
  }
}
</style>